<template>
  <div class="flex-ai-c c-gray-blue">
    <div class="time-box d-flex-c m-r-s ff-agencyyr">
      <span
        class="f-30"
        style="letter-spacing: 2px;  width: 100px;"
      >{{ this.nowTime.times }}</span>
      <span class="f-14 d-flex">{{ this.nowTime.date }}&nbsp;<span class="f-12">{{ this.nowTime.week }}</span></span>
    </div>
    <div class="flex-ai-c m-r-s">
      <div
        style="font-size: 38px;"
        class="ff-agencyyr"
      >
        {{ weatherInfo.temperature }}
      </div>
      <div class="f-14 d-flex-c">
        <span>℃</span>
        <span>&nbsp;</span>
      </div>
    </div>
    <div class="f-14  m-r-s">
      <div>降雨</div>
      <span class="ff-agencyyr">
        {{ weatherInfo.precipitation }}mm</span>
    </div>
    <div class="f-14">
      <div>风速</div>
      <span class="ff-agencyyr">{{ weatherInfo.windSpeed }}m/s</span>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
const weekArr = ['日', '一', '二', '三', '四', '五', '六']
export default {
  name: 'YsqxxLeftTopInfo',
  data () {
    this.currentCity = '54401'// 暂默认石家庄
    return {
      timer: null,
      nowTime: { date: '', week: '', times: '' },
      weatherInfo: {
        temperature: '',
        windSpeed: '',
        precipitation: ''
      }
    }
  },
  mounted () {
    this.getWeatherInfo()
    this.timer = setInterval(() => {
      this.getNowTime()
    }, 1000)
  },
  beforeUnmount () {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    getNowTime () {
      const now = dayjs()
      this.nowTime.date = now.format('YYYY/MM/DD')
      this.nowTime.week = '星期' + weekArr[now && now.$d.getDay()]
      this.nowTime.times = now.format('HH:mm:ss')
    },
    // 天气数据调接口，应该不需要轮询去更新？会太频繁了
    async getWeatherInfo () {
      const { data } = await this.$request.post('ysjc/zhzs/getuserqxsj', {
        appId: 'YSJC',
        bzCode: 'YSJC'
      })
      this.weatherInfo = {
        ...data.now,
        precipitation: Number(data.now.precipitation).toFixed(1)
      }
    }
  }
}
</script>
